@{
    ViewBag.Title = "base64在线转图片,在线图片转base64";
    ViewBag.keywords = "在线图片转base64,Base64,图片Base64编码,Base64转图片,base64在线转图片";
    ViewBag.description = "在线图片Base64编码工具,图片Base64编码,Base64转图片";var host = Appsettings.app("BaseFile:HostUrl");
}
<div class="layui-row layui-form layui-form-pane ImgToBase64">
    <div class="layui-form-item layui-form-text">
        <span class="file">
            <input type="file" id="input_file" class="layui-btn layui-btn-normal" accept="image/png,image/jpeg,image/gif,image/jpg">
            <span class="file-button">选择一个图片文件</span>
        </span>
        <span>
            <label id="file_name"></label>
        </span>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">内容：</label>
        <div class="layui-input-block">
            <lable placeholder="输入的内容" readonly id="img_input" name="img_input" rows="8" autocomplete="off" class="layui-textarea" style="min-height:18em; height: auto;overflow: auto"></lable>
        </div>
    </div>
    <div class="layui-form-item">
        <a class="layui-btn batimg">Base64还原图片</a>
        <a class="layui-btn layui-btn-danger clear">清空</a>
        <a class="layui-btn layui-btn-primary copy1">复制</a>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">输出：</label>
        <div class="layui-input-block">
            <textarea placeholder="输出内容" id="area_base64" name="area_base64" rows="8" autocomplete="off" class="layui-textarea"></textarea>
        </div>
    </div>
</div>
@section Scripts{
<script type="text/javascript">
     layui.config({ base: '@host/js/' }).use('common',function(){  $=layui.jquery;var ImgToBase64=layui.ImgToBase64;//let area_input = document.getElementById('content');let area_output = document.getElementById('outtxt');
     $(".ImgToBase64 #input_file").bind("change", function (e) {
        let img_input = document.getElementById('img_input');
        let file_name = document.getElementById('file_name');
        let area_base64 = document.getElementById('area_base64');
        ImgToBase64.loadImage(img_input, file_name, area_base64, e.target.files[0]);
        e.value = null;
    });
    $(".ImgToBase64 .batimg").bind("click", function () {
        let img_input = document.getElementById('img_input');
        let area_base64 = document.getElementById('area_base64');
        let base64 = area_base64.value;
        if (base64 === undefined || base64 === '' || base64 === null) { layer.msg("请在输出框输入一个base64的文件.", { icon: 2 }); return; }
        ImgToBase64.base64oImage(img_input, area_base64);
    });
    $(".ImgToBase64 .clear").bind("click", function () {
        let img_input = document.getElementById('img_input');
        let file_name = document.getElementById('file_name');
        let area_base64 = document.getElementById('area_base64');
        img_input.innerText = ''; file_name.innerText = ''; area_base64.value = '';
    });
    $(".ImgToBase64 .copy1").bind("click", function () {
        let area_base64 = document.getElementById('area_base64');
        var txt = area_base64.value;
        if (txt === undefined || txt === '' || txt === null) { layer.msg("没有输出内容.", { icon: 2 }); return; }
        if (XEClipboard.copy(txt)) { layer.msg("复制成功.", { icon: 1 }); } else { layer.msg("复制失败.", { icon: 2 }); }
    });
    });
</script>
}
